<template>
  <div>
    <div class="all-city-employment">
      <div style="margin-top:0px;margin-left:12px;margin-right:12px;margin-bottom:12px;">
        <div :style="{height:height-15+'px',background:'#1b2b44'}" @mouseenter="mouseenter1()"
             @mouseleave="mouseleave1()">
          <top-filter :title="'供求分析'" ref="topFilter1">
            <single-list-filter-without-cb :filter="filter"
                                           :pageChange="pageChange"
                                           :type="'threeYears'"
                                           @confirmSingleSelect="chooseYear"
                                           ref="yearsFilter">
            </single-list-filter-without-cb>
          </top-filter>
          <!--<h3 class="city-title">-->
          <!--<div class="chart-name"><span class="left-circle"></span>供求分析</div>-->
          <!--<a href="#/humanResources/detail/new-employment-in-cities-detail"-->
          <!--class="chart-next next-btn">城镇新就业登记台账 >>></a>-->
          <!--</h3>-->
          <div class="distribution-insured-persons-wrapper">
            <ul style="margin-top:20px;">
              <li class="left-card">
                <div class="content-left">
                  <img src="../../../assets/img/chart-svg/not-employed.svg" alt="" class="card-icon">
                  <span class="card-title">岗位需求</span>
                </div>
                <div class="content-right">
                  <span class="card-subTitle">{{queryYear}}年总人数</span>
                  <p>
                    <span class="card-number">{{hisTotal}}</span>人
                  </p>
                </div>
              </li>
              <li class="middle-card" style="background-color:#ff5d8a">
                <div class="content-left">
                  <img src="../../../assets/img/chart-svg/job-number.svg" alt="" class="card-icon" style="width: 12%">
                  <span class="card-title">求职人数</span>
                </div>
                <div class="content-right">
                  <span class="card-subTitle">{{queryYear}}年总人数</span>
                  <p>
                    <span class="card-number">{{targetTotal}}</span>人
                  </p>
                </div>
              </li>
              <li class="right-card" style="background-color:#e8b93c">
                <div class="content-left">
                  <img src="../../../assets/img/chart-svg/employed-rate.svg" alt="" class="card-icon">
                  <span class="card-title">供求倍率</span>
                </div>
                <div class="content-right">
                  <span class="card-subTitle" style="left:-5px;">{{queryYear}}年职业供求倍率</span>
                  <p>
                    <span class="card-number" style="color:#fff3d2">{{finishTotal}}</span>
                  </p>
                </div>
              </li>
            </ul>
          </div>
          <div :class="showFifthChart?'chart-container':''">
            <div class="four-chart-mini-title">
              <span>供求数量月度分析</span>
              <span class="title-bk-container"></span>
            </div>
            <div id="new-employment-analysis" :style="{height:height-165+'px'}"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="horizontal-devide-line"></div>
    <div class="chart-item new-chart-container">
      <div class="chart-content-wrapper chart-content-wrapper1"
           :style="{height:height*1.3+'px',backgroundColor:'#1b2b44'}" @mouseenter="mouseenter()"
           @mouseleave="mouseleave">
        <!--<top-filter :title="reportName" ref="topFilter" :isShowHelp="false">-->
        <!--<double-check-filter :isParentLinkChild="true" @confirmDoubleSelect="planAreaSelect" defaultText="统筹区"-->
        <!--:filter="filter" type="planArea"></double-check-filter>-->
        <!--</top-filter>-->
        <div class="bottom-chart-container" :style="{height:height*1.2+'px',background:'#1b2b44'}">
          <div>
            <!--<div class="disease-species-name">-->
            <!--<div class="disease-species-name-item">-->
            <!--<img src="../../../assets/img/chart-svg/age-scatter.svg" alt="">-->
            <!--年龄分布-->
            <!--</div>-->
            <!--<div class="disease-species-name-item">-->
            <!--<img src="../../../assets/img/chart-svg/sex-scatter.svg" alt="">-->
            <!--性别分布-->
            <!--</div>-->
            <!--<div class="disease-species-name-item">-->
            <!--<img src="../../../assets/img/chart-svg/medical-time.svg" alt="">-->
            <!--就业去向分布-->
            <!--</div>-->
            <!--</div>-->
            <div class="medical-chart-box" :style="{height:0.6*height+'px'}">
              <div style="width: 50%; height: 90%">
                <div class="four-chart-mini-title">
                  <span>性别分布</span>
                  <span class="title-bk-container"></span>
                </div>
                <div class="disease-species-item" id="employment-age"></div>
              </div>
              <div style="width: 50%; height: 90%">
                <div class="four-chart-mini-title">
                  <span>学历分布</span>
                  <span class="title-bk-container"></span>
                </div>
                <div class="disease-species-item" id="employment-sex"></div>
              </div>
              <!--<div class="vertical-devide-line"></div>-->
            </div>
            <div class="horizontal-devide-line"></div>
            <div class="medical-chart-box" :style="{height:0.7*height+'px'}">
              <!--<div class="disease-species-item" id="employment-time"></div>-->
              <!--<div class="vertical-devide-line"></div>-->
              <div style="width: 100%; height: 100%">
                <div class="four-chart-mini-title">
                  <span>职业类别分布</span>
                  <span class="title-bk-container"></span>
                </div>
                <div class="disease-species-item" id="employment-time-line"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import SingleListFilterWithoutCb from '../../last/filter/single-list-filter-without-checkbox.vue'
  import {svgPath, quitFullScreen} from "../../../assets/js/utils";
  import {loadingOpt} from '../../../assets/js/utils.js'
  import DoubleCheckFilter from '../../last/filter/double-check-filter.vue'
  import TopFilter from '../../last/filter/top-filter1.vue'
  import {baseApiF, getSearchItems} from "../../../api/api";
  import {
    getOldInsuranceRaisingAnalyse1,
    getOldInsuranceRaisingAnalyse2,
    getOldInsuranceRaisingAnalyse3
  } from "../../../api/last-api";
  import {getBasePaymentPeopleAnalyse1} from "../../../api/last-api";
  export default {
    props: ['isChange', 'fullScreen', 'isCollapse', 'pageChange'],
    data () {
      return {
        reportName: '供求分析',
        leftAnimate: '',
        svgPath: svgPath,
        navWidth: 800,
        top: 70,
        height: 500,
        areaCode: '',
        areaName: '',
        filter: null,
        showChart: true,
        finishRate: "",
        finishTotal: "",
        hisTotal: "",
        targetTotal: '',
        showFifthChart: false,
        areaCodeArr: [],
        queryYear: 2018
      }
    },
    components: {
      DoubleCheckFilter,
      TopFilter,
      SingleListFilterWithoutCb
    },
    watch: {
      isChange(){
        setTimeout(() => {
          this.getChartItem();
        }, 400)
      },
      pageChange(){
        // this.myChart5.resize();
        // this.resizeChart();
      },
    },
    activated(){
    },
    mounted() {
      //获取筛选数据
      this.getFirstData();
      setTimeout(() => {
        this.getChartItem();
        setTimeout(() => {
          this.myChart1 = this.$echarts.init(document.getElementById("employment-age"));
          this.myChart2 = this.$echarts.init(document.getElementById("employment-sex"));
//          this.myChart3 = this.$echarts.init(document.getElementById("employment-time"));
          this.myChart4 = this.$echarts.init(document.getElementById("employment-time-line"));
          this.myChart5 = this.$echarts.init(document.getElementById("new-employment-analysis"));
          let that = this;
          //全市就业情况分析
//          this.getEmployment();
          //2018年度新增就业人员分析
          this.getData()
          // 点击黑块的事件
          this.myChart4.getZr().off('click');
//          this.myChart4.getZr().on('click', function (params) {
//            let pointInPixel = [params.offsetX, params.offsetY];
//
//            if (that.myChart4.containPixel('grid', pointInPixel)) {
//
//              let xIndex = that.myChart4.convertFromPixel({seriesIndex: 0},
//                [params.offsetX, params.offsetY])[0];
//
//              /*事件处理代码书写位置*/
//              let areaCode = that.areaCodeArr[xIndex];
//              that.$router.push({
//                path: '/humanResources/detail/new-employment-in-cities-detail',
//                query: {areaCode: areaCode}
//              })
//            }
//            if (params.componentSubType == 'bar') {
//              let areaCode = params.data.id;
//              that.$router.push({
//                path: '/humanResources/detail/new-employment-in-cities-detail',
//                query: {areaCode: areaCode}
//              })
//            }
//          })
        }, 100)
      }, 300)
    },
    methods: {
      chooseYear (year) {
        this.queryYear = year;
        this.getData();
      },
      getData() {
        this.getNewAddEmployment();
        this.getNewAddEmployment1();
        this.getNewAddEmployment2();

        this.getSexDistribution()
      },
      getEmployment(){
        this.showFifthChart = false;
        this.myChart5.showLoading(loadingOpt)
        this.$axios.post(`${baseApiF()}hr/townJobAnalyze`).then(res => {
          if (res.status == 200) {
            if (res.data.code == 0) {
              let json = res.data.data;
              this.myChart5.hideLoading();
              this.hisTotal = json.hisTotal;
              this.finishRate = json.finishRate;
              this.finishTotal = json.finishTotal;
              this.targetTotal = json.targetTotal;
              this.drawEmploymentAnalysis(json.tjs);
            }
          } else {
            this.showFifthChart = true;
          }
        }).catch(res => {
          this.showFifthChart = true;
        })
      },
      getNewAddEmployment(){
//        this.showLoading();
//        this.$axios.post(`${baseApiF()}hr/queryTownJobDis`, {areaCode: this.areaCode}).then(res => {
//          if (res.status == 200) {
//            if (res.data.code == 0) {
//              this.hideLoading();
//              let json = res.data.data;
//              this.drawEmploymentTime(json.times);
//              this.drawMedicalAge(json.ages);
//              this.drawMedicalSex(json.sexs, json.totals);
//              this.drawMedicalTime(json.oris);
//            }
//          }
//        })
        getOldInsuranceRaisingAnalyse1(this.queryYear).then(response => {
//          this.json = response.data;
          if (response.code == 0) {
//            this.isShowChart = true;
//            this.myChart.hideLoading();
//            this.reportName = this.json.reportName;
//            this.conclusion = this.json.reportConclusion;
            this.hisTotal = response.data.apply_total
            this.targetTotal = response.data.demand_total
            this.finishTotal = Number(response.data.rate).toFixed(2)
            this.drawEmploymentAnalysis(response.data)
//            this.drawMedicalSex(response.data)
//            this.drawEmploymentTime(response.data);
          } else {
//            this.isShowChart = false;
          }
        }).catch(res => {
          console.log(res)
          /*this.isShowChart = false;*/
        })
      },
      getNewAddEmployment1(){
//        this.showLoading();
//        this.$axios.post(`${baseApiF()}hr/queryTownJobDis`, {areaCode: this.areaCode}).then(res => {
//          if (res.status == 200) {
//            if (res.data.code == 0) {
//              this.hideLoading();
//              let json = res.data.data;
//              this.drawEmploymentTime(json.times);
//              this.drawMedicalAge(json.ages);
//              this.drawMedicalSex(json.sexs, json.totals);
//              this.drawMedicalTime(json.oris);
//            }
//          }
//        })
        getOldInsuranceRaisingAnalyse2(this.queryYear).then(response => {
//          this.json = response.data;
          if (response.code == 0) {
//            this.isShowChart = true;
//            this.myChart.hideLoading();
//            this.reportName = this.json.reportName;
//            this.conclusion = this.json.reportConclusion;
//            this.hisTotal = response.data.apply_total
//            this.targetTotal = response.data.demand_total
//            this.finishTotal = response.data.rate
//            this.drawEmploymentAnalysis(response.data)
            this.drawMedicalSex(response.data)
//            this.drawEmploymentTime(response.data);
          } else {
//            this.isShowChart = false;
          }
        }).catch(res => {
          console.log(res)
          /*this.isShowChart = false;*/
        })
      },
      getNewAddEmployment2(){
//        this.showLoading();
//        this.$axios.post(`${baseApiF()}hr/queryTownJobDis`, {areaCode: this.areaCode}).then(res => {
//          if (res.status == 200) {
//            if (res.data.code == 0) {
//              this.hideLoading();
//              let json = res.data.data;
//              this.drawEmploymentTime(json.times);
//              this.drawMedicalAge(json.ages);
//              this.drawMedicalSex(json.sexs, json.totals);
//              this.drawMedicalTime(json.oris);
//            }
//          }
//        })
        getOldInsuranceRaisingAnalyse3(this.queryYear).then(response => {
//          this.json = response.data;
          if (response.code == 0) {
//            this.isShowChart = true;
//            this.myChart.hideLoading();
//            this.reportName = this.json.reportName;
//            this.conclusion = this.json.reportConclusion;
//            this.hisTotal = response.data.apply_total
//            this.targetTotal = response.data.demand_total
//            this.finishTotal = response.data.rate
//            this.drawEmploymentAnalysis(response.data)
            this.drawEmploymentTime(response.data)
//            this.drawEmploymentTime(response.data);
          } else {
//            this.isShowChart = false;
          }
        }).catch(res => {
          console.log(res)
          /*this.isShowChart = false;*/
        })
      },
      getSexDistribution() {
        getBasePaymentPeopleAnalyse1(this.queryYear).then(response => {
          if (response.code == 0) {
//            this.isShowChart = true;
//            this.myChart.hideLoading();
//            this.reportName = this.json.reportName;
//            this.conclusion = this.json.conclusion;
//            this.myChart.resize();
            this.drawMedicalAge(response.data)
          } else {
//            this.isShowChart = false;
          }
        }).catch(res => {
//          console.log(res)
//          this.isShowChart = false;
        })
      },
      getFirstData(){
        getSearchItems('init/initInput').then((res) => {
          if (res.code == 0) {
            this.filter = res.data;
            let areaCode = [];
            let areaName = [];
            this.filter.nc.planArea.map((item, index) => {
              if (index > 0 && index <= 6) {
                areaCode.push(item.selectId)
                areaName.push(item.selectName);
              }
            });
            this.areaCode = areaCode.join(',');
            this.areaName = areaName.join('、');

//            this.filter.years.splice(0, 2);
            this.queryYear = this.filter.years[0]
          }
        })
      },
      closeAll(){
        quitFullScreen();
      },
      mouseenter () {
//        this.$refs.topFilter._hideChartTitle()
      },
      mouseleave () {
//        this.$refs.topFilter._showChartTitle()
      },
      mouseenter1 () {
        this.$refs.topFilter1._hideChartTitle()
      },
      mouseleave1 () {
        this.$refs.topFilter1._showChartTitle()
      },
      planAreaSelect (selectedIdArr, selectedNameArr) {
        // 统筹区选择
        this.areaCode = selectedIdArr.join(',');
        this.areaName = selectedNameArr.join('、');
        this.getNewAddEmployment();
      },
      //动态设置宽高
      getChartItem(){
        let height = document.querySelector('body').clientHeight;
        let barHeight = 70;
        let sideWidth = 44;
        let bodyWidth = document.querySelector('body').clientWidth;
        let top = 70;
        if (document.querySelector('.el-header')) {
          barHeight = document.querySelector('.el-header').clientHeight;
          if (document.querySelector('.el-aside')) {
            sideWidth = document.querySelector('.el-aside').clientWidth;
          }
        } else {
          barHeight = 0;
          sideWidth = 0;
          top = 0;
        }
        this.top = top;
        this.left = sideWidth;
        this.navWidth = bodyWidth - sideWidth;
        this.height = height - barHeight - 54;
        //每一个图表块的宽度
        let width = 1000;
        if (document.querySelector('.chart-box')) {
          width = document.querySelector('.chart-box').clientWidth;
        }
        this.width = (width - 44) / 2;
        //nav-top left值
        if (this.myChart5) {
          setTimeout(() => {
            this.myChart5.resize();
            this.resizeChart();
          }, 100)
        }
      },
      //全市就业情况分析
      drawEmploymentAnalysis(json){
        json.yearList = [];
        json.workCountList = [];
        json.retireCountList = [];
        json.raiseList = [];
        json.months.map((item, i) => {
          json.yearList.push(item.title);
          json.workCountList.push(item.apply_count);
          json.retireCountList.push(item.demand_count);
          json.raiseList.push(Number(item.ad_rate).toFixed(2));
        })
        this.myChart5.setOption(
          {
//            title: {
//              show: true,
//              subtext: '供求数量月度分析',
//              x: 'left',
//              left: '6%',
//              subtextStyle: {
//                color: '#fff',
////                fontSize: 16
//              }
//            },
            // Make gradient line here
            // Make gradient line here
            grid: [//此参数可在一个dom中划分多个图表 可设置不同图表的位置
              {
                height: '65%',
                top: '10%',
                tooltip: {
                  show: false,

                }
              },
              {
                height: '65%',
                top: '10%',
                id: 'three',
                tooltip: {
                  show: true,
                  trigger: 'axis',
                  axisPointer: {
                    type: 'shadow'
                  },
                }
              }
            ],
            legend: [
              {
                top: '82%',
                left: 'center',
                itemWidth: 8,
                itemHeight: 10,
                itemGap: 20,
                selectedMode: false,
                data: [
                  {name: '岗位需求数量', icon: 'rect'},
                  {name: '求职人数', icon: 'rect'},
                  {name: '供求倍率', icon: 'circle'},
                  /**'抚养比参考值'**/
                ],
                textStyle: {
                  color: '#fff'
                },

              }
            ],
            tooltip: {
              show: true,
              textStyle: {
                fontSize: 12
              },
              formatter: function (params) {
                let dataIndex = params[0].dataIndex;
//              console.log(JSON.stringify(json))
//              console.log(dataIndex)
                return `<span style="color: #fff">供求数量</span></br>
                      <span style="color: #fff">月份: ${json.yearList[dataIndex]}</span></br>
                      <span style="color: #fff">岗位需求: ${json.workCountList[dataIndex]}个</span></br>
                      <span style="color: #fff">求职人数: ${json.retireCountList[dataIndex]}人</span></br>
                      <span style="color: #fff">供需比: ${json.raiseList[dataIndex]}</span></br>`;
              }
            },
            xAxis: [
              {
                data: json.yearList,
                gridIndex: 0,
                show: true,
                axisLine: {
                  show: false,//显示x轴坐标线并设置为虚线
                  lineStyle: {
                    color: '#294363'
                  }
                },
                axisTick: {
                  show: false //不显示x轴坐标的刻度
                },
                axisLabel: {
                  show: false //不显示x轴坐标数值
                }
              },
              {
                data: json.yearList,
                gridIndex: 1,
                axisLine: { //x轴的横线是否显示
                  show: true,
                  lineStyle: {
                    color: '#2a4565'
                  }
                },
                axisTick: { //x轴的刻度短竖线是否显示
                  show: false
                },
                axisLabel: {
                  formatter: '{value}',
                  textStyle: {
                    color: '#fff'
                  }
                },
              }
            ],
            yAxis: [
              {
                name: '供求倍率',
                nameTextStyle: {
                  color: '#fff'
                },
                splitLine: {
                  show: false
                },
                position: 'right',
                gridIndex: 0,
                /* minInterval:5,*/
                /*max:'dataMax',*/
//              splitNumber: 3,
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: '#2a4565'
                  }
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  show: true,
                  formatter: '{value}',
                  textStyle: {
                    color: '#fff'
                  }
                },
              },
              {
                name: '人数：人',
                nameTextStyle: {
                  color: '#fff'
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    color: '#2a4565',
                    type: 'dashed'
                  }
                },
                gridIndex: 1,
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: '#2a4565'
                  }
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  formatter: '{value}',
                  textStyle: {
                    color: '#fff'
                  }
                },
              }
            ],
            series: [
              {
                type: 'line',
                name: '供求倍率',
                color: '#D48164',
                showSymbol: true,
                symbol: 'circle',
                data: json.raiseList,
                symbolSize: 10,
                xAxisIndex: 0,
                yAxisIndex: 0,
                tooltip: {
                  show: false,
                  formatter: function (params) {
                    return `<span style="color:${params.color}">${params.name}</span></br><span style='color:#c7c7c7'>${params.value}%</span>`
                  }
                },
                label: {
                  show: false,
                  position: 'top',
                  formatter: '{c}%',
                  color: '#fff'
                },
//              markLine: {
//                label: {
//                  position: 'start',
//                  /*formatter: '平均增长\n率{c}%',*/
//                  formatter: '{c}%',
//                  color: '#fff',
//                },
//                symbol: 'none',//设置平均线的没样式
//                data: [
//                  {
//                    type: 'average',
//                    name: '平均增长率',
//                    tooltip: {
//                      show: true,
//                      formatter(params){
//                        return `<span style="color:${params.color}">平均增长率</span></br><span style='color:#c7c7c7'>${params.value}%</span>`
//                      }
//                    }
//                  }
//                ],
//                lineStyle: {
//                  color: '#ff6a93'
//                }
//              }
              },
              {
                type: 'bar',
                showSymbol: false,
                name: '岗位需求数量',
                stack: 'one',
                data: json.workCountList,
                color: '#ff6a93',
//              tooltip: {
//                show: true,
//                formatter: function (params) {
//                  return `<span style="color:${params.color}">${params.name}</span></br><span style='color:#c7c7c7'>${params.value}%</span>`
//                }
//              },
                barWidth: '20%',
                barGap: '50%',
                xAxisIndex: 1,
                yAxisIndex: 1,
              },
              {
                type: 'bar',
                name: '求职人数',//此值与legend图例对应
                showSymbol: false,
                stack: 'two',
                color: '#ffd66a',
//              tooltip: {
//                show: true,
//                formatter: function (params) {
//                  return `<span style="color:${params.color}">${params.name}</span></br><span style='color:#c7c7c7'>${params.value}%</span>`
//                }
//              },
                data: json.retireCountList,
                label: {
                  show: false,
                  color: '#fff',
                  position: 'top',
                  formatter: function (params) {
                    let val = ''
                    let arr = json.yearlyPersonalPayRateList;
                    arr.map((item, index) => {
                      if (params.dataIndex == index) {
                        if (Math.round((arr[index] + params.value) * 100) % 10 == 0) {
                          val = (arr[index] + params.value).toFixed(1)
                        } else if (Math.round((arr[index] + params.value) * 100) % 100 == 0) {
                          val = (arr[index] + params.value).toFixed(0)
                        } else {
                          val = (arr[index] + params.value).toFixed(2)
                        }
                      }
                    })
                    return val + '%';
                  }
                },
                barWidth: '20%',
                barGap: '10%',
                xAxisIndex: 1,
                yAxisIndex: 1
              }
            ]
          }
        )
      },
      //性别分布
      drawMedicalSex(json){
        json.yearList = [];
        json.workCountList = [];
        json.retireCountList = [];
        json.raiseList = [];
        json.retireCountList1 = [];
        json.raiseList1 = [];
        json.map((item, i) => {
          json.yearList.push(item.title);
          json.workCountList.push(item.apply_count);
          json.retireCountList.push(item.demand_count);
          json.raiseList.push(Number(item.ad_rate).toFixed(2));
          json.retireCountList1.push((Number(item.apply_rate) * 100).toFixed(2));
          json.raiseList1.push((Number(item.demand_rate) * 100).toFixed(2));
        })
        this.myChart2.setOption(
          {
//            title: {
//              show: true,
//              subtext: '学历分布',
//              x: 'left',
//              left: '6%',
//              subtextStyle: {
//                color: '#fff',
////                fontSize: 16
//              }
//            },
            // Make gradient line here
            // Make gradient line here
            grid: [//此参数可在一个dom中划分多个图表 可设置不同图表的位置
              {
                height: '65%',
                top: '10%',
                tooltip: {
                  show: false,

                }
              },
              {
                height: '65%',
                top: '10%',
                id: 'three',
                tooltip: {
                  show: true,
                  trigger: 'axis',
                  axisPointer: {
                    type: 'shadow'
                  },
                }
              }
            ],
            legend: [
              {
                top: '82%',
                left: 'center',
                itemWidth: 8,
                itemHeight: 10,
                itemGap: 20,
                selectedMode: false,
                data: [
                  {name: '岗位需求数量', icon: 'rect'},
                  {name: '求职人数', icon: 'rect'},
                  {name: '供求倍率', icon: 'circle'},
                  /**'抚养比参考值'**/
                ],
                textStyle: {
                  color: '#fff'
                },

              }
            ],
            tooltip: {
              show: true,
              textStyle: {
                fontSize: 12
              },
              formatter: function (params) {
                let dataIndex = params[0].dataIndex;
//              console.log(JSON.stringify(json))
//              console.log(dataIndex)
                return `<span style="color: #fff">供求数量</span></br>
                      <span style="color: #fff">月份: ${json.yearList[dataIndex]}</span></br>
                      <span style="color: #fff">岗位需求: ${json.workCountList[dataIndex]}个</span></br>
                      <span style="color: #fff">求职人数: ${json.retireCountList[dataIndex]}人</span></br>
                      <span style="color: #fff">供需比: ${json.raiseList[dataIndex]}</span></br>
                      <span style="color: #fff">岗位需求占比: ${json.retireCountList1[dataIndex]}%</span></br>
                      <span style="color: #fff">求职人数占比: ${json.raiseList1[dataIndex]}%</span></br>`;
              }
            },
            xAxis: [
              {
                data: json.yearList,
                gridIndex: 0,
                show: true,
                axisLine: {
                  show: false,//显示x轴坐标线并设置为虚线
                  lineStyle: {
                    color: '#294363'
                  }
                },
                axisTick: {
                  show: false //不显示x轴坐标的刻度
                },
                axisLabel: {
                  show: false //不显示x轴坐标数值
                }
              },
              {
                data: json.yearList,
                gridIndex: 1,
                axisLine: { //x轴的横线是否显示
                  show: true,
                  lineStyle: {
                    color: '#2a4565'
                  }
                },
                axisTick: { //x轴的刻度短竖线是否显示
                  show: false
                },
                axisLabel: {
                  formatter: '{value}',
                  textStyle: {
                    color: '#fff'
                  }
                },
              }
            ],
            yAxis: [
              {
                name: '供求倍率',
                nameTextStyle: {
                  color: '#fff'
                },
                splitLine: {
                  show: false
                },
                position: 'right',
                gridIndex: 0,
                /* minInterval:5,*/
                /*max:'dataMax',*/
//              splitNumber: 3,
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: '#2a4565'
                  }
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  show: true,
                  formatter: '{value}',
                  textStyle: {
                    color: '#fff'
                  }
                },
              },
              {
                name: '人数：人',
                nameTextStyle: {
                  color: '#fff'
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    color: '#2a4565',
                    type: 'dashed'
                  }
                },
                gridIndex: 1,
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: '#2a4565'
                  }
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  formatter: '{value}',
                  textStyle: {
                    color: '#fff'
                  }
                },
              }
            ],
            series: [
              {
                type: 'line',
                name: '供求倍率',
                color: '#D48164',
                showSymbol: true,
                symbol: 'circle',
                data: json.raiseList,
                symbolSize: 10,
                xAxisIndex: 0,
                yAxisIndex: 0,
                tooltip: {
                  show: false,
                  formatter: function (params) {
                    return `<span style="color:${params.color}">${params.name}</span></br><span style='color:#c7c7c7'>${params.value}%</span>`
                  }
                },
                label: {
                  show: false,
                  position: 'top',
                  formatter: '{c}%',
                  color: '#fff'
                },
//              markLine: {
//                label: {
//                  position: 'start',
//                  /*formatter: '平均增长\n率{c}%',*/
//                  formatter: '{c}%',
//                  color: '#fff',
//                },
//                symbol: 'none',//设置平均线的没样式
//                data: [
//                  {
//                    type: 'average',
//                    name: '平均增长率',
//                    tooltip: {
//                      show: true,
//                      formatter(params){
//                        return `<span style="color:${params.color}">平均增长率</span></br><span style='color:#c7c7c7'>${params.value}%</span>`
//                      }
//                    }
//                  }
//                ],
//                lineStyle: {
//                  color: '#ff6a93'
//                }
//              }
              },
              {
                type: 'bar',
                showSymbol: false,
                name: '岗位需求数量',
                stack: 'one',
                data: json.workCountList,
                color: '#ff6a93',
//              tooltip: {
//                show: true,
//                formatter: function (params) {
//                  return `<span style="color:${params.color}">${params.name}</span></br><span style='color:#c7c7c7'>${params.value}%</span>`
//                }
//              },
                barWidth: '30%',
                barGap: '50%',
                xAxisIndex: 1,
                yAxisIndex: 1,
              },
              {
                type: 'bar',
                name: '求职人数',//此值与legend图例对应
                showSymbol: false,
                stack: 'two',
                color: '#ffd66a',
//              tooltip: {
//                show: true,
//                formatter: function (params) {
//                  return `<span style="color:${params.color}">${params.name}</span></br><span style='color:#c7c7c7'>${params.value}%</span>`
//                }
//              },
                data: json.retireCountList,
                label: {
                  show: false,
                  color: '#fff',
                  position: 'top',
                  formatter: function (params) {
                    let val = ''
                    let arr = json.yearlyPersonalPayRateList;
                    arr.map((item, index) => {
                      if (params.dataIndex == index) {
                        if (Math.round((arr[index] + params.value) * 100) % 10 == 0) {
                          val = (arr[index] + params.value).toFixed(1)
                        } else if (Math.round((arr[index] + params.value) * 100) % 100 == 0) {
                          val = (arr[index] + params.value).toFixed(0)
                        } else {
                          val = (arr[index] + params.value).toFixed(2)
                        }
                      }
                    })
                    return val + '%';
                  }
                },
                barWidth: '30%',
                barGap: '10%',
                xAxisIndex: 1,
                yAxisIndex: 1
              }
            ]
          }
        );
      },
      //就业去向分布
      drawMedicalTime(json) {
        // console.log(json)
        let x = [];
        let countArr = [];
        let rateArr = [];
        json.map((item, i) => {
          x.push(item.title);
          countArr.push(item.count);
          rateArr.push(Number((item.rate * 100).toFixed(2)))
        })
        this.myChart3.setOption({
          backgroundColor: "#1B2B44",
          grid: {
            top: 40,
            left: "1%",
            bottom: 25,
          },
          tooltip: {
            show: true,
            trigger: "axis",
            axisPointer: {
              type: "shadow"
            },
            textStyle: {
              fontSize: 12
            },
            formatter: function (params) {
              let i = params[0].dataIndex;
              let txt = `
                          <p>就业登记人数</p>
                          <p>就业去向：${params[0].name}</p>
                          <p>人数：${countArr[i]}人</p>
                          <p>占比：${rateArr[i]}%</p>
              `;
              return txt;
            }
          },
          yAxis: {
            show: false
          },
          xAxis: {
            data: x,
            axisLine: {
              show: false // 显示x轴坐标线并设置为虚线
            },
            axisTick: {
              show: false // 不显示x轴坐标的刻度
            },
            axisLabel: {
              show: true,// 显示x轴坐标数值
              interval: 0,
              textStyle: {
                color: "#fff",
                lineHeight: 18
              },
            }
          },
          series: [{
            type: "bar",
            data: countArr,
            stack: "age",
            color: "#ff6a93",
            barWidth: "40%",
            barMaxWidth: 30,
            label: {
              show: true,
              position: "top",
              formatter: function (params) {
                let i = params.dataIndex;
                return `${rateArr[i]}%`
              },
              color: "#fff"
            }
          }]
        })
      },
      //年龄分布
      drawMedicalAge(json){
        let titleList = ['男性供求分析', '女性供求分析', '无性别供求分析'];
        let colorList = ['#3281fd', '#FF5D8A', '#fed573'];
        let colorList1 = ['#80b2f9', '#fda2bb', '#fee9b6'];
        let nameList = ['男性岗位需求', '女性岗位需求', '无性别要求'];
        let nameList1 = ['男性求职人数', '女性求职人数', '未知性别'];

        json.zhanBi = []
        json.zhanBi.push(json[1])
        json.zhanBi.push(json[2])
        json.zhanBi.push(json[3])

        console.log('dddd====' + JSON.stringify(json.zhanBi))
        let legendData = []
        nameList.forEach((item, dataIndex) => {
          legendData.push({
            name: `{a|${nameList[dataIndex]}}\n{d|}{a|}{b|${json.zhanBi[dataIndex].apply_count}}{a|人}`,
            value: json.zhanBi[dataIndex].apply_count,
            textStyle: {
              rich: {
                a: {
                  color: '#ffffff',
                  lineHeight: 30,
                  verticalAlign: 'bottom',
                  padding: [0, 0, 0, 10],
                },
                b: {
                  color: colorList[dataIndex],
                  lineHeight: 30,
                  fontSize: 20,
                  verticalAlign: 'bottom'
                },
                c: {
                  backgroundColor: colorList[dataIndex],
                  width: 10,
                  height: 10,
                  verticalAlign: 'bottom',
                  lineHeight: 30,
                },
                d: {
                  backgroundColor: 'rgba(0,0,0,0)',
                  width: 10,
                  height: 10,
                  verticalAlign: 'bottom',
                  lineHeight: 30,
                }
              }
            }
          })
        })

        let legendData1 = []
        nameList1.forEach((item, dataIndex) => {
          legendData1.push({
            name: `{a|${nameList1[dataIndex]}}\n{d|}{a|}{b|${json.zhanBi[dataIndex].demand_count}}{a|人}`,
            value: json.zhanBi[dataIndex].demand_count,
            textStyle: {
              rich: {
                a: {
                  color: '#ffffff',
                  lineHeight: 30,
                  verticalAlign: 'bottom',
                  padding: [0, 0, 0, 10],
                },
                b: {
                  color: colorList1[dataIndex],
                  lineHeight: 30,
                  fontSize: 20,
                  verticalAlign: 'bottom'
                },
                c: {
                  backgroundColor: colorList1[dataIndex],
                  width: 10,
                  height: 10,
                  verticalAlign: 'bottom',
                  lineHeight: 30,
                },
                d: {
                  backgroundColor: 'rgba(0,0,0,0)',
                  width: 10,
                  height: 10,
                  verticalAlign: 'bottom',
                  lineHeight: 30,
                }
              }
            }
          })
        })
        // 绘制图表
        this.myChart1.setOption(
          {
//            title: {
//              show: true,
//              subtext: '性别分布',
//              x: 'left',
//              left: '6%',
//              subtextStyle: {
//                color: '#fff',
////                fontSize: 16
//              }
//            },
            tooltip: {
              show: true,
              textStyle: {
                fontSize: 12
              },
              formatter: function (params) {
//                console.log(params)
                let dataIndex = params.dataIndex;
                return `<span style="color: #fff">${titleList[dataIndex]}</span></br>
                      <span style="color: #fff">岗位需求: ${json.zhanBi[dataIndex].apply_count}</span></br>
                      <span style="color: #fff">求职人数: ${json.zhanBi[dataIndex].demand_count}</span></br>
                      <span style="color: #fff">供求倍率: ${Number(json.zhanBi[dataIndex].ad_rate).toFixed(2)}</span></br>
                      <span style="color: #fff">岗位需求占比: ${(Number(json.zhanBi[dataIndex].apply_rate) * 100).toFixed(2) }%</span></br>
                      <span style="color: #fff">求职人数占比: ${(Number(json.zhanBi[dataIndex].demand_rate) * 100).toFixed(2) }%</span></br>`;
              },
            },
            legend: [
              {
                orient: 'vertical',
                // x: 'left',
                top: '15%',
                left: '8%',
                selectedMode: false,
                textStyle: {
                  color: '#fff'
                },
                itemWidth: 10,
                itemHeight: 10,
                data: legendData,
              },
              {
                orient: 'vertical',
                // x: 'left',
                top: '15%',
                left: '75%',
                selectedMode: false,
                textStyle: {
                  color: '#fff'
                },
                itemWidth: 10,
                itemHeight: 10,
                data: legendData1,
              },
//              {
//                orient: 'vertical',
//                top: '40%',
//                left: '75%',
//                textStyle: {
//                  color: '#fff'
//                },
//                icon: 'rect',
//                itemWidth: 10,
//                itemHeight: 10,
//                selectedMode: false,
//                data: data.pieData.numDesc
//              }
            ],
            series: [
              {
                name: '基于性别的养老支出统计',
                type: 'pie',
                radius: ['0', '30%'],
                center: ['50%', '50%'],
                clockwise: false,
                hoverAnimation: false,
                avoidLabelOverlap: false,
                minAngle: 5,
                label: {
                  show: false,
                  position: 'center',
                  formatter: function (params) {
                    if (params.dataIndex == 0) {
//                      return `<span style="color:#67FFDB">832.75</span><br><span style="color:#67FFDB">当月统计总人数</span>`
                      return `{a|${json.zongRenShu}}\n{b|当月统计总人数}\n{b|（${json.zongRenShuDanWei}）}`
                    } else {
                      return ''
                    }
                  },
                  rich: {
                    a: {
                      color: '#67FFDB',
                      lineHeight: 20,
                      fontSize: 16,
                      fontWeight: 700
                    },
                    b: {
                      color: '#67FFDB',
                      lineHeight: 20
                    }
                  }
                },
                itemStyle: {
                  color: function (params) {
                    return colorList[params.dataIndex]
                  }
                },
                data: legendData
              },
              {
                name: '基于性别的养老支出统计',
                type: 'pie',
                radius: ['40%', '55%'],
                center: ['50%', '50%'],
                clockwise: false,
                hoverAnimation: false,
                avoidLabelOverlap: false,
                minAngle: 5,
                label: {
                  show: false,
                  position: 'center',
                  formatter: function (params) {
                    if (params.dataIndex == 0) {
//                      return `<span style="color:#67FFDB">832.75</span><br><span style="color:#67FFDB">当月统计总人数</span>`
                      return `{a|${json.zongRenShu}}\n{b|当月统计总人数}\n{b|（${json.zongRenShuDanWei}）}`
                    } else {
                      return ''
                    }
                  },
                  rich: {
                    a: {
                      color: '#67FFDB',
                      lineHeight: 20,
                      fontSize: 16,
                      fontWeight: 700
                    },
                    b: {
                      color: '#67FFDB',
                      lineHeight: 20
                    }
                  }
                },
                itemStyle: {
                  color: function (params) {
                    return colorList1[params.dataIndex]
                  }
                },
                data: legendData1
              },
//              {
//                name: '基于性别的养老支出统计',
//                type: 'pie',
//                hoverAnimation: false,
//                radius: ['60%', '80%'],
//                clockwise: false,//是否按顺时针来排布 false为按逆时针排布。
//                label: {
//                  show: false,
//                },
//                itemStyle: {
//                  color: function (params) {
//                    let colorList = ['#3281fd', '#ff6a93', '#888', '#ccc'];
//                    return colorList[params.dataIndex]
//                  }
//                },
//                data: data1
//              }
            ]
          }
        )
      },
      //就业时间分布
      drawEmploymentTime(json){
        json.yearList = [];
        json.workCountList = [];
        json.retireCountList = [];
        json.raiseList = [];
        json.retireCountList1 = [];
        json.raiseList1 = [];
        json.map((item, i) => {
          json.yearList.push(item.title);
          json.workCountList.push(item.apply_count);
          json.retireCountList.push(item.demand_count);
          json.raiseList.push(Number(item.ad_rate).toFixed(2));
          json.retireCountList1.push((Number(item.apply_rate) * 100).toFixed(2));
          json.raiseList1.push((Number(item.demand_rate) * 100).toFixed(2));
        })
        this.myChart4.setOption(
          {
//            title: {
//              show: true,
//              subtext: '职业类别分布',
//              x: 'left',
//              left: '6%',
//              subtextStyle: {
//                color: '#fff',
////                fontSize: 16
//              }
//            },
            // Make gradient line here
            // Make gradient line here
            grid: [//此参数可在一个dom中划分多个图表 可设置不同图表的位置
              {
                height: '65%',
                top: '10%',
                tooltip: {
                  show: false,

                }
              },
              {
                height: '65%',
                top: '10%',
                id: 'three',
                tooltip: {
                  show: true,
                  trigger: 'axis',
                  axisPointer: {
                    type: 'shadow'
                  },
                }
              }
            ],
            legend: [
              {
                top: '82%',
                left: 'center',
                itemWidth: 8,
                itemHeight: 10,
                itemGap: 20,
                selectedMode: false,
                data: [
                  {name: '岗位需求数量', icon: 'rect'},
                  {name: '求职人数', icon: 'rect'},
                  {name: '供求倍率', icon: 'circle'},
                  /**'抚养比参考值'**/
                ],
                textStyle: {
                  color: '#fff'
                },

              }
            ],
            tooltip: {
              show: true,
              textStyle: {
                fontSize: 12
              },
              formatter: function (params) {
                let dataIndex = params[0].dataIndex;
//              console.log(JSON.stringify(json))
//              console.log(dataIndex)
                return `<span style="color: #fff">供求数量</span></br>
                      <span style="color: #fff">月份: ${json.yearList[dataIndex]}</span></br>
                      <span style="color: #fff">岗位需求: ${json.workCountList[dataIndex]}个</span></br>
                      <span style="color: #fff">求职人数: ${json.retireCountList[dataIndex]}人</span></br>
                      <span style="color: #fff">供需比: ${json.raiseList[dataIndex]}</span></br>
                      <span style="color: #fff">岗位需求占比: ${json.retireCountList1[dataIndex]}%</span></br>
                      <span style="color: #fff">求职人数占比: ${json.raiseList1[dataIndex]}%</span></br>`;
              }
            },
            xAxis: [
              {
                data: json.yearList,
                gridIndex: 0,
                show: true,
                axisLine: {
                  show: false,//显示x轴坐标线并设置为虚线
                  lineStyle: {
                    color: '#294363'
                  }
                },
                axisTick: {
                  show: false //不显示x轴坐标的刻度
                },
                axisLabel: {
                  show: false //不显示x轴坐标数值
                }
              },
              {
                data: json.yearList,
                gridIndex: 1,
                axisLine: { //x轴的横线是否显示
                  show: true,
                  lineStyle: {
                    color: '#2a4565'
                  }
                },
                axisTick: { //x轴的刻度短竖线是否显示
                  show: false
                },
                axisLabel: {
                  formatter: '{value}',
                  textStyle: {
                    color: '#fff'
                  }
                },
              }
            ],
            yAxis: [
              {
                name: '供求倍率',
                nameTextStyle: {
                  color: '#fff'
                },
                splitLine: {
                  show: false
                },
                position: 'right',
                gridIndex: 0,
                /* minInterval:5,*/
                /*max:'dataMax',*/
//              splitNumber: 3,
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: '#2a4565'
                  }
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  show: true,
                  formatter: '{value}',
                  textStyle: {
                    color: '#fff'
                  }
                },
              },
              {
                name: '人数：人',
                nameTextStyle: {
                  color: '#fff'
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    color: '#2a4565',
                    type: 'dashed'
                  }
                },
                gridIndex: 1,
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: '#2a4565'
                  }
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  formatter: '{value}',
                  textStyle: {
                    color: '#fff'
                  }
                },
              }
            ],
            series: [
              {
                type: 'line',
                name: '供求倍率',
                color: '#D48164',
                showSymbol: true,
                symbol: 'circle',
                data: json.raiseList,
                symbolSize: 10,
                xAxisIndex: 0,
                yAxisIndex: 0,
                tooltip: {
                  show: false,
                  formatter: function (params) {
                    return `<span style="color:${params.color}">${params.name}</span></br><span style='color:#c7c7c7'>${params.value}%</span>`
                  }
                },
                label: {
                  show: false,
                  position: 'top',
                  formatter: '{c}%',
                  color: '#fff'
                },
//              markLine: {
//                label: {
//                  position: 'start',
//                  /*formatter: '平均增长\n率{c}%',*/
//                  formatter: '{c}%',
//                  color: '#fff',
//                },
//                symbol: 'none',//设置平均线的没样式
//                data: [
//                  {
//                    type: 'average',
//                    name: '平均增长率',
//                    tooltip: {
//                      show: true,
//                      formatter(params){
//                        return `<span style="color:${params.color}">平均增长率</span></br><span style='color:#c7c7c7'>${params.value}%</span>`
//                      }
//                    }
//                  }
//                ],
//                lineStyle: {
//                  color: '#ff6a93'
//                }
//              }
              },
              {
                type: 'bar',
                showSymbol: false,
                name: '岗位需求数量',
                stack: 'one',
                data: json.workCountList,
                color: '#ff6a93',
//              tooltip: {
//                show: true,
//                formatter: function (params) {
//                  return `<span style="color:${params.color}">${params.name}</span></br><span style='color:#c7c7c7'>${params.value}%</span>`
//                }
//              },
                barWidth: '20%',
                barGap: '50%',
                xAxisIndex: 1,
                yAxisIndex: 1,
              },
              {
                type: 'bar',
                name: '求职人数',//此值与legend图例对应
                showSymbol: false,
                stack: 'two',
                color: '#ffd66a',
//              tooltip: {
//                show: true,
//                formatter: function (params) {
//                  return `<span style="color:${params.color}">${params.name}</span></br><span style='color:#c7c7c7'>${params.value}%</span>`
//                }
//              },
                data: json.retireCountList,
                label: {
                  show: false,
                  color: '#fff',
                  position: 'top',
                  formatter: function (params) {
                    let val = ''
                    let arr = json.yearlyPersonalPayRateList;
                    arr.map((item, index) => {
                      if (params.dataIndex == index) {
                        if (Math.round((arr[index] + params.value) * 100) % 10 == 0) {
                          val = (arr[index] + params.value).toFixed(1)
                        } else if (Math.round((arr[index] + params.value) * 100) % 100 == 0) {
                          val = (arr[index] + params.value).toFixed(0)
                        } else {
                          val = (arr[index] + params.value).toFixed(2)
                        }
                      }
                    })
                    return val + '%';
                  }
                },
                barWidth: '20%',
                barGap: '10%',
                xAxisIndex: 1,
                yAxisIndex: 1
              }
            ]
          }
        )
      },
      showLoading(){
        this.myChart1.showLoading(loadingOpt);
        this.myChart2.showLoading(loadingOpt);
//        this.myChart3.showLoading(loadingOpt);
        this.myChart4.showLoading(loadingOpt);
      },
      hideLoading(){
        this.myChart1.hideLoading();
        this.myChart2.hideLoading();
//        this.myChart3.hideLoading();
        this.myChart4.hideLoading();
      },
      clearChart(){
        this.myChart1.clear();
        this.myChart2.clear();
//        this.myChart3.clear();
        this.myChart4.clear();
      },
      resizeChart(){
        this.myChart1.resize();
        this.myChart2.resize();
//        this.myChart3.resize();
        this.myChart4.resize();
      }
    }
  }
</script>

<style scoped>
  @import '../../../assets/css/decision.css';
  @import '../../../assets/css/portrait-personk-detail.css';

  .horizontal-devide-line {
    width: 100%;
    height: 1px;
    background: #1D2027;
  }

  .vertical-devide-line {
    height: 100%;
    width: 1px;
    background: #1D2027;
  }

  .city-title {
    height: 44px;
    line-height: 44px;
    color: #fff;
    font-size: 14px;
    box-sizing: border-box;
  }

  .chart-name {
    float: left;
  }

  .chart-next {
    float: right;
    cursor: pointer;
    text-decoration: none;
  }

  .left-circle {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #018DDE;
    display: inline-block;
    margin: 0 10px;
  }

  .content-right {
    color: #fff;
  }

  .card-subTitle {
    font-size: 14px;
    position: relative;
    top: -10px;
  }

  .chart-container {
    background: url('../../../assets/img/noData.png') no-repeat center 30%;
    background-size: 15%;
  }

  .disease-species-name {
    height: 32px;
    line-height: 32px;
    color: #fff;
    margin-left: 40px;
  }

  .disease-species-name-item {
    float: left;
    width: 33.3%;
  }

  .disease-species-name-item img {
    height: 20px;
    margin-top: 6px;
    width: 20px;
    float: left;
    margin-right: 10px;
  }

  .medical-chart-box {
    /*margin-left:40px;*/
    overflow: hidden;
    display: flex;
    flex-direction: row;
  }

  .disease-species-item {
    height: 100%;
    flex: 1;
  }

  .next-btn {
    font-size: 12px;
    cursor: pointer;
    float: right;
    margin-top: 8px;
    margin-right: 9px;
    line-height: 28px;
    height: 28px;
    padding: 0 15px;
    border-radius: 5px;
    border: solid 1px #67ffdb;
    color: #67ffdb;
  }
</style>
